import * as React from 'react';
import {Button, Form as AntdForm, Modal as AntdModal} from 'antd';
import {renderItems, VJsonComponent, VJsonComponentBase,} from "../factory";
import _ from "lodash";
import {YvanEvent} from "../types";
import {apply, YvanEventBind, YvanEventDispatch} from "../utils/helper";
// import {DraggableModal, DraggableModalProvider} from 'ant-design-draggable-modal'
// import 'ant-design-draggable-modal/dist/index.css'
// import Draggable from 'react-draggable';

export interface DialogVJsonProp {
    title?: string
    visible?: boolean
    mask?: boolean
    okText?: string
    width?: string | number
    height?: string | number
    cancelText?: string
    zIndex?: number
    afterClose?: YvanEvent<Dialog>,
    onOk?: YvanEvent<Dialog>,
    onCancel?: YvanEvent<Dialog>,
    items: any[]
    footer: any[]
}

export interface PageState {
    disabled: boolean
    // initialWidth?: number
    // initialHeight?: number
}

@VJsonComponent({
    view: 'dialog'
})
export default class Dialog extends VJsonComponentBase<DialogVJsonProp, PageState> {
    static defaultProps = {
        title: '未命名对话框',
        okText: '确定',
        cancelText: '取消',
        visible: true,
        width: '60%',
        height: '70%',
        footer: [],
        items: []
    };

    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Dialog.defaultProps
        )

        props.$context.scopeInstance['$closeDialog'] = this.close.bind(this)

        // let initialWidth = undefined
        // if (typeof this.props.vjson.width === 'number') {
        //     initialWidth = this.props.vjson.width
        // } else if (typeof this.props.vjson.width === 'string' && this.props.vjson.width) {
        //     const strValue = this.props.vjson.width.toString()
        //     if (strValue.endsWith('%')) {
        //         initialWidth = document.body.clientWidth * parseInt(strValue.substring(0, strValue.length - 1)) / 100
        //     }
        // }
        //
        // let initialHeight = undefined
        // if (typeof this.props.vjson.height === 'number') {
        //     initialHeight = this.props.vjson.height
        // } else if (typeof this.props.vjson.height === 'string' && this.props.vjson.height) {
        //     const strValue = this.props.vjson.height.toString()
        //     if (strValue.endsWith('%')) {
        //         initialHeight = document.body.clientHeight * parseInt(strValue.substring(0, strValue.length - 1)) / 100
        //     } else {
        //         initialHeight = parseInt(strValue.substring(0, strValue.length - 1))
        //     }
        // }

        this.state = {
            ...this.state,
            disabled: true
            // initialWidth,
            // initialHeight,
        }
    }

    close() {
        this.props.vjson.visible = false
    }

    onCancelEvent() {
        if (typeof this.props.vjson.afterClose === 'undefined') {
            this.close()
        } else {
            YvanEventDispatch(this.props.vjson.afterClose, this)
        }
    }

    debugToolClick = () => {//数据
        const scope = this.props.$context.scopeInstance
        //@ts-ignore
        window.debugTool.openDebug(scope)
    }

    // 不可拖拽
    render() {
        return (
            // @ts-ignore
            <AntdModal key={this.key} view_id={this.key} aria-roledescription={this.view}
                title={
                    <>{apply(this, this.props.vjson.title)}
                        {
                            (_.has(window, 'debugTool') ?
                                <Button style={{marginLeft: '10px'}} onClick={this.debugToolClick}>调试</Button> : null)
                        }
                    </>
                }
                visible={apply(this, this.props.vjson.visible)}
                mask={apply(this, this.props.vjson.mask)}
                okText={apply(this, this.props.vjson.okText)}
                width={apply(this, this.props.vjson.width)}
                cancelText={apply(this, this.props.vjson.cancelText)}
                zIndex={apply(this, this.props.vjson.zIndex)}
                afterClose={YvanEventBind(this.props.vjson.afterClose, this)}
                footer={renderItems(this, this.props.vjson.footer)}
                onOk={YvanEventBind(this.props.vjson.onOk, this)}
                onCancel={this.onCancelEvent.bind(this)}
                destroyOnClose={true}
            >
                {
                    ...renderItems(this, this.props.vjson.items)
                }
            </AntdModal>
        );
    }

    // // 可拖拽
    // render() {
    //     return (
    //         <DraggableModalProvider>
    //             {/*@ts-ignore*/}
    //             <DraggableModal key={this.key} view_id={this.key} aria-roledescription={this.view}
    //                             title={
    //                                 <>{this.props.vjson.title}
    //                                     {
    //                                         (_.has(window, 'debugTool') ?
    //                                             <Button style={{marginLeft: '10px'}}
    //                                                     onClick={this.debugToolClick}>调试</Button> : null)
    //                                     }
    //                                 </>
    //                             }
    //                             visible={this.props.vjson.visible}
    //                             mask={this.props.vjson.mask}
    //                 // mask={false}
    //                             okText={this.props.vjson.okText}
    //                 // width={this.props.vjson.width}
    //                             initialWidth={this.state.initialWidth}
    //                             initialHeight={this.state.initialHeight}
    //                             cancelText={this.props.vjson.cancelText}
    //                 // zIndex={this.props.vjson.zIndex}
    //                             afterClose={YvanEventBind(this.props.vjson.afterClose, this)}
    //                             footer={renderItems(this, this.props.vjson.footer)}
    //                             onOk={YvanEventBind(this.props.vjson.onOk, this)}
    //                             onCancel={this.onCancelEvent.bind(this)}
    //                             destroyOnClose={true}
    //             >
    //
    //                 {
    //                     ...renderItems(this, this.props.vjson.items)
    //                 }
    //
    //             </DraggableModal>
    //         </DraggableModalProvider>
    //     );
    // }

}
